body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    /*background-color: cadetblue;*/
}
.top{
    width: 100%;
    height: 16rem;
    /* padding-top: 12%; */
    padding-top: 2vw;
    background: linear-gradient(to bottom, #059bf8, #7fc7f4, #e6f0f6);
}

.container {
    width: auto;
    /* width: 300px; */
    /* max-width: 300px; */
    height: auto;
    margin: -40% auto;
    padding: 20px;
    /* background-color: #9cd9c9; */
}

h4 {
    text-align: center;
    margin-bottom: 20px;
}

.block {
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 10px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 0 7px gray;
    overflow: hidden;
    /* width: 80%; */
}
.blockTwo {
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 10px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 0 7px gray;
    overflow: hidden;
    height: 1.2rem;
    /* width: 80%; */
}
.bottom{
    margin-top: 8%;
    text-align: center;
   
}
.bottom_color{
    /* background-color: rgb(30,165,246); */
    margin-top: 16%;
    /* background-color: #1EA5F6;
     */
     background: linear-gradient(to bottom, #059bf8, #95cef1, #d0e3ef);
}

.qita{
    margin-top: 30%;
    color: gray;width: 72%;margin:20% 36% 0 36%;
}

.block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.block li {
    padding: 5px 0;
}

.block a {
    color: #333;
    text-decoration: none;
}
li{
display: flex;
}
li img{
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
hr{
    width: 96%;
    size: 1px;
}
.left{
    float: left;
}
.right{
    float: right;
}
.right a{
    color: gray;
    margin-right: 8px;
}
.right img{
    margin-top: 4px;
    width: 16px;
    height: 16px;
}
p {
    display: flex;
    justify-content: space-between;
} 

/* 无边框 */
input{ 
border:none;
font-size: 120%;
margin-left: 20%;
width: 50%;
}

.code{
    font-size: 88%;
    border-radius: 20px;
    width:28%;
    float: right;
    padding: 12px;
    margin-top: -11%;
    margin-right: -3.2%;
    background-color: #1EA5F6;
}
.zhuce{
    margin-left: 15%;
     font-size: 90%;
     font-weight: bold;
     width:70%;
 }
 .bottomP{
    color: gray;width: 56%;margin:0 auto;
 }
/* iphone 4,5 */
@media (min-width: 320px) and (max-width: 360Px) {
    .code{
        border-radius: 20px;
        width:28%;
        float: right;
        padding: 12px;
        margin-top: -4.4%;
        margin-right: -4.2%;
        background-color: #1EA5F6
    }
    .bottom{
        font-size: 65%; 
    }
    .bottomP{
        width: auto;
        padding-left: 20%;
        font-size: 45%;
    }
 }   
/* iphone se */
 @media (min-width: 375px) and (max-width: 400px) {
    .code{
        border-radius: 20px;
        width:28%;
        float: right;
        padding: 12px;
        margin-top: -3.6%;
        margin-right: -4.2%;
        background-color: #1EA5F6
    }
    .bottom{
        font-size: 78%; 
        padding-left: 3%;
    }
    .bottomP{
        padding-left: 5%;
        font-size: 78%; 
    }
 } 

 /* iphone 12pro */
 @media (min-width: 390px) and (max-width: 400px) {
    .code{
        border-radius: 20px;
        width:28%;
        float: right;
        padding: 12px;
        margin-top: -3.3%;
        margin-right: -4.2%;
        background-color: #1EA5F6
    }
    .bottom{
        padding-left: 5%;
        font-size: 78%; 
    }
 } 
  /* iphone xr */
  @media (min-width: 414px) and (max-width: 430px) {
    .code{
        border-radius: 20px;
        width:28%;
        float: right;
        padding: 12px;
        margin-top: -3%;
        margin-right: -4.2%;
        background-color: #1EA5F6
    }
    .bottom{
        padding-left: 5%;
        font-size: 78%; 
    }
    .bottomP{
        padding-left: 10%;
    }
 } 
/* iphone  Mini   ipad*/
@media (min-width: 768px) and (max-width: 819px) {
    .zhuce{
        margin-left: 30%;
    }
    .container{
        margin-top:-20%;
    }
    .bottomP{
        padding-left: 36%;
    }
    .qita{
        padding-left: 8%;
    }
 } 
 /* iphone  Air*/
@media (min-width: 820px) and (max-width: 888px) {
    .top{
        height: 32REM;
    }
    .zhuce{
        margin-left: 30%;
    }
    .container{
        margin-top:-45%;
    }
    .bottomP{
        padding-left: 36%;
    }
    .qita{
        padding-left: 8%;
    }
 } 

  /* iphone  Pro*/
@media (min-width: 1024px) and (max-width: 1234px) {
    .top{
        height: 32REM;
    }
    .zhuce{
        margin-left: 30%;
    }
    .container{
        margin-top:-35%;
    }
    .bottomP{
        padding-left: 36%;
    }
    .qita{
        padding-left: 8%;
    }
 } 